<template>
  <global-header></global-header>
  <div class="company-intro-container">
    <div class="team-intro-section">
      <h2 class="section-title" style="color: #1e88e5; font-size: 50px; text-align: center; margin-bottom: 30px;margin-left: 160px">智能评估师团队介绍</h2>
      <div class="team-members-group teachers">
        <h3 class="group-title">教师团队</h3>
        <div class="member-card" v-for="teacher in teachers" :key="teacher.name">
          <div class="avatar-wrapper">
            <img :src="teacher.avatar" alt="Teacher Avatar" class="avatar">
          </div>
          <h4 class="member-name">{{ teacher.name }}</h4>
          <p class="member-title">{{ teacher.title }}</p>
          <p class="member-contact">{{ teacher.contact }}</p>
        </div>
      </div>

      <div class="team-members-group students">
        <h3 class="group-title">学生团队</h3>
        <div class="member-card" v-for="student in students" :key="student.name">
          <div class="avatar-wrapper">
            <img :src="student.avatar" alt="Student Avatar" class="avatar">
          </div>
          <h4 class="member-name">{{ student.name }}</h4>
          <p class="member-title">{{ student.title }}</p>
          <p class="member-title">{{ student.major }}</p>
          <p class="member-contact">{{ student.contact }}</p>
        </div>
      </div>
    </div>
  </div>
  <AppFooter></AppFooter>
</template>

<script>
import GlobalHeader from "@/components/Index/GlobalHeader.vue";
import AppFooter from "@/components/Footer/AppFooter.vue";

export default {
  name: 'CompanyIntro',
  components: { AppFooter, GlobalHeader },
  data() {
    return {
      teachers: [
        {
          name: '代洲',
          title: '博士 高级工程师',
          contact: 'daizhou87@qq.com',
          avatar: '/src/assets/avatar/dz.png' // 替换为您的头像 URL
        },
        {
          name: '张辉',
          title: '博士 高级工程师',
          contact: 'zhanghui@mail.gufe.edu.cn',
          avatar: '/src/assets/avatar/zh.png' // 替换为您的头像 URL
        }
      ],
      students: [
        {
          name: '杨康',
          major:'软件工程专业',
          title: '本科生',
          contact: '1677414120@qq.com',
          avatar: '/src/assets/avatar/yk.jpg' // 替换为您的头像 URL
        },
        {
          name: '刘小龙',
          major:'计算机科学与技术专业',
          title: '本科生',
          contact: '2082959338@qq.com',
          avatar: '/src/assets/avatar/lxl.jpg' // 替换为您的头像 URL
        },
        {
          name: '王景延',
          major:'软件工程专业',
          title: '本科生',
          contact: '3215083955@qq.com',
          avatar: '/src/assets/avatar/wjy.jpg' // 替换为您的头像 URL
        },
        {
          name: '廖媛媛',
          major:'管理科学专业',
          title: '本科生',
          contact: '2172324945@qq.com',
          avatar: '/src/assets/avatar/lyy.jpg' // 替换为您的头像 URL
        },
        {
          name: '唐洁',
          major:'管理科学专业',
          title: '本科生',
          contact: '2829592645@qq.com',
          avatar: '/src/assets/avatar/tj.png' // 替换为您的头像 URL
        }
      ]
    };
  }
};
</script>

<style scoped>
.company-intro-container {
  max-width: 2300px;
  min-height: 700px; /* 确保内容足够时容器不会过小 */
  margin: 0 auto;
  padding: 20px;
  background-image: url('@/assets/images/logo/gufe.png'); /* 保持您的背景图 */
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center; /* 水平居中团队介绍部分 */
  align-items: center; /* 垂直居中团队介绍部分 */
}

.team-intro-section {
  background-color: rgba(255, 255, 255, 0.9); /* 调整背景透明度 */
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  text-align: center;
  width: 100%; /* 调整团队介绍部分的宽度 */
  max-width: 1700px; /* 设置最大宽度 */
}

.section-title {
  margin-bottom: 40px;
}

.team-members-group {
  margin-left: -40px;
  margin-bottom: 40px;
}

.group-title {
  color: #1976d2;
  font-size: 28px;
  margin-bottom: 120px;
  border-bottom: 5px solid #1e88e5;
  padding-top: 90px;
}

.teachers {
  display: flex;
  justify-content: center;
  gap: 80px;
  margin-bottom: 60px;
}

.students {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 30px;
}

.member-card {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  text-align: center;
}

.avatar-wrapper {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 15px;
  border: 3px solid #e0e0e0;
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.member-name {
  font-size: 18px;
  color: #333;
  margin-bottom: 5px;
  font-weight: bold;
}

.member-title {
  font-size: 14px;
  color: #777;
  margin-bottom: 10px;
}

.member-contact {
  font-size: 12px;
  color: #555;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .teachers {
    flex-direction: column;
    align-items: center;
  }

  .students {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .member-card {
    padding: 15px;
    width: 20px;
  }

  .avatar-wrapper {
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
  }

  .member-name {
    font-size: 16px;
  }

  .member-title {
    font-size: 12px;
  }

  .member-contact {
    font-size: 10px;
  }
}
</style>